<template>
  <div class="transaction main">
    <p class="title">交易报表</p>
    <ul class="table-list clearfix">
      <li :class="{'active':tabActive.isTrade}" @click="toggleActive('isTrade')">
        <router-link to="tradeRecord">交易记录</router-link>
      </li>
      <li :class="{'active':tabActive.isEntrust}" @click="toggleActive('isEntrust')">
        <router-link to="entrustRecord">委托记录</router-link>
      </li>
      <li :class="{'active':tabActive.isProfit}" @click="toggleActive('isProfit')">
        <router-link to="profitlossRecord">盈亏记录</router-link>
      </li>
      <li :class="{'active':tabActive.isLines}" @click="toggleActive('isLines')">
        <router-link to="linesRecord">额度记录</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        tabActive:{
          isTrade:true,
          isEntrust:false,
          isProfit:false,
          isLines:false
        }
      }
    },
    methods:{
      toggleActive (cur) {
        this.resetActive();
        this.tabActive[cur] = true;
      },
      resetActive () {        
        this.tabActive.isTrade = false;
        this.tabActive.isEntrust = false;
        this.tabActive.isProfit = false;
        this.tabActive.isLines = false;
      }
    }
  }
</script>
<style scoped lang="scss">
.main {
  padding: 20px;
  background: $c_3;

  .title {
    font-size: 20px;
    padding-left: 2px;
    padding-bottom: 15px;
    color: $c_2;
    position: relative;
    z-index: 9;
    margin-bottom: 0;
    border-bottom:1px solid $c_8;
  }

  .table-list {
    background-color: $c_3;
    border-bottom: 1px #e1e1e1 solid;

    li {
      width: 14%;
      font-size: 16px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      color: $c_1;
      cursor: pointer;
      float: left;

      > a {
        width: 100%;
        height: 100%;
        display: block;
      }

      &.active {
        font-size: 16px;
        color: $c_2;
        margin-bottom: -2px;
        border-bottom: 2px solid $c_2;

        > a {
          color: $c_2;
        }

      }
    }
  }
}
</style>

